<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>宿舍管理系统</title>
    <meta name="renderer" content="webkit">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />

    <link rel="stylesheet" href="{{ asset('css/font.css') }}">
    <link rel="stylesheet" href="{{ asset('css/xadmin.css') }}">
    <script type="text/javascript" src="{{ asset('lib/layui/layui.js') }}" charset="utf-8"></script>
    <script type="text/javascript" src="{{ asset('js/xadmin.js') }}"></script>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">
                {{ csrf_field() }}
                <input type="hidden" name="id" value="{{ $dormMeter->id }}">
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>宿舍</label>
                    <div class="layui-input-block">
                        <input type="text" name="dorm_id" disabled value="{{ $dormMeter->dorm_id }}"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="meter_type_id" class="layui-form-label">
                        <span class="x-red">*</span>表类型
                    </label>
                    <div class="layui-input-inline">
                        @foreach ($meterTypes as $k => $meterType)
                            <input type="radio" name="meter_type_id" value="{{ $meterType->id }}"
                                title="{{ $meterType->name }}"
                                {{ $dormMeter->meter_type_id == $meterType->id ? 'checked' : '' }} disabled>
                        @endforeach
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="last_reading_date" class="layui-form-label">
                        <span class="x-red">*</span>最近读表日期
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="last_reading_date" name="last_reading_date" required=""
                            lay-verify="required" class="layui-input" value="{{ $dormMeter->last_reading_date }}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>读数实际读取日期
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="last_reading" class="layui-form-label">
                        <span class="x-red">*</span>最近读数
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" name="last_reading" required="" lay-verify="required|number"
                            value="{{ $dormMeter->last_reading }}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="reset_limit" class="layui-form-label">
                        <span class="x-red">*</span>重置阈值
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" name="reset_limit" required="" lay-verify="required|number"
                            value="{{ $dormMeter->reset_limit }}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="unit" class="layui-form-label">
                        <span class="x-red">*</span>计量单位
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" name="unit" required="" lay-verify="required"
                            value="{{ $dormMeter->unit }}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="nfc_id" class="layui-form-label">
                        <span class="x-red">*</span>表TID
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" name="nfc_id" required="" lay-verify="required"
                            value="{{ $dormMeter->nfc_id }}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="expire_date" class="layui-form-label">
                        停用日期
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="expire_date" name="expire_date" required=""
                            lay-verify="required" class="layui-input" value="{{ $dormMeter->expire_date }}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                    </label>
                    <button class="layui-btn" lay-filter="save" lay-submit="" type="button">
                        保存
                    </button>
                </div>
            </form>
        </div>
    </div>
    <script>
        layui.use(['form', 'layer', 'laydate'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer;

                var laydate = layui.laydate;

                //执行一个laydate实例
                laydate.render({
                    elem: '#last_reading_date',
                    max: new Date().toDateString()
                });
                laydate.render({
                    elem: '#expire_date',
                });

                // form.on('radio(meter_type_on)',function (data) {
                //     let unit = $(data.elem).data('content');
                //     console.log(unit);
                //     $("[name='unit']").val(unit);
                // });

                //监听提交
                form.on('submit(save)',
                    function(data) {
                        layer.confirm('修改最近读数和日期将会对下一次费用计算造成影响，是否继续？', function(index) {
                            layer.close(index);
                            $.ajaxSetup({
                                headers: {
                                    'X-CSRF-Token': $('input[name="_token"]').val()
                                }
                            });
                            let url = '/dorm-meters/' + data.field.id;
                            $.ajax({
                                url: url,
                                data: data.field,
                                type: 'PATCH',
                                dataType: "json",
                                success: function(d) {
                                    if (d.error) {
                                        layer.msg('保存失败：' + d.message, {
                                            icon: 2,
                                            time: 3000
                                        });
                                    } else {
                                        layer.alert('保存成功', {
                                            icon: 6,
                                            time: 3000
                                        }, function() {
                                            //关闭当前frame
                                            xadmin.close();
                                            // 可以对父窗口数据表进行刷新
                                            parent.layui.table.reload('test');
                                        });
                                    }

                                },
                                error: function(err) {
                                    console.log(err)
                                    layer.msg('保存失败', {
                                        icon: 2,
                                        time: 3000
                                    });
                                }
                            });
                            return false;
                        });

                    });


            });
    </script>
</body>

</html>
